<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ember.js • TodoMVC</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/x-handlebars" data-template-name="todos">
<section id="todoapp">
    <header id="header">
        <h1>todos</h1>
        {{input type="text" id="new-todo" value=newTitle action="createTodo" placeholder="What needs to be done?"}}
    </header>

    <section id="main">
        <ul id="todo-list">
            {{#each}}
            <li {{bind-attr class="isCompleted:completed"}}>
                {{input type="checkbox" checked=isCompleted class="toggle"}}
                <label>{{title}}</label><button class="destroy"></button>
            </li>
            {{/each}}
        </ul>

        <input type="checkbox" id="toggle-all">
    </section>

    <footer id="footer">
          <span id="todo-count">
            <strong>{{remaining}}</strong> {{inflection}} left
          </span>
        <ul id="filters">
            <li>
                <a href="all" class="selected">All</a>
            </li>
            <li>
                <a href="active">Active</a>
            </li>
            <li>
                <a href="completed">Completed</a>
            </li>
        </ul>

        <button id="clear-completed">
            Clear completed (1)
        </button>
    </footer>
</section>

<footer id="info">
    <p>Double-click to edit a todo</p>
</footer>
</script>
<script src="bower_components/jquery/jquery.min.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-data/ember-data.js"></script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
<script src="js/models/todo.js"></script>
<script src="js/controllers/todos_controller.js"></script>
<script src="js/controllers/todo_controller.js"></script>
</body>
</html>